{{extend './layout.htm'}}

{{block 'css'}}
<style>
    .me-relate {
        line-height: 1.8;
    }
    .me-relate-item {
        padding:0 8px;
    }
    .me-relate-git {
        margin-right: 3px;
    }
    .me-relate-item:hover .me-relate-git {
        display: inline;
    }
    .me-input-group {
        display: flex;
    }
    .me-input-prefix {
        width: 105px;
    }
    .me-input-suffix {
        width: 105px;
    }
    .me-input-group input {
        border-radius: 0!important;
    }
    .me-input-suffix input {
        border-radius: 0 2px 2px 0!important;
    }
    .me-hello-world button {
        margin-left: 10px;
        margin-top: 4px;
        margin-bottom: 8px;
    }
    @media screen and (max-width: 767.99px) {
        .layui-form-pane .layui-form-radio {
            box-sizing: border-box;
            min-width: 30%;
            margin-right: 0;
        }
        .me-hello-world button {
            min-width: 30%;
            text-align: left;
        }
    }
    @media screen and (max-width: 420px) {
        .layui-form-pane .layui-form-radio {
            min-width: 40%;
        }
        .me-hello-world button {
            min-width: 40%;
        }
    }
</style>
{{/block}}

{{block 'main'}}
    <div class="me-center">
        <h1 class="me-green" style="font-size: 50px; font-weight: 500; line-height: 1.5; padding-top: 30px;">PushMe</h1>
        <h2 class="me-green" style="font-size: 30px; font-weight: 500; padding: 16px 0;">
            一个简单轻量的Android消息通知客户端！
        </h2>
        <div style="padding: 16px 0;">
            <a class="layui-btn" href="{{url('docs/index', 'https://push.i-i.me')}}" target="_blank">接口文档</a>
            <a class="layui-btn layui-btn-primary layui-border-green" href="{{url('docs/download', 'https://push.i-i.me')}}" target="_blank">APP下载</a>
        </div>
        <div class="me-relate">
            <span class="me-relate-item"><a class="me-relate-git" href="https://github.com/yafoo/pushme-server" target="_blank"><i class="layui-icon layui-icon-github"></i></a><a href="https://push.i-i.me/docs/host" target="_blank">PushMeServer</a></span>
            <span class="me-relate-item"><a class="me-relate-git" href="https://github.com/yafoo/pushme-plugin" target="_blank"><i class="layui-icon layui-icon-github"></i></a><a href="https://push.i-i.me/docs/plugin" target="_blank">PushMePlugin</a></span>
            <span class="me-relate-item"><a class="me-relate-git" href="https://github.com/yafoo/pushme-client" target="_blank"><i class="layui-icon layui-icon-github"></i></a><a href="https://push.i-i.me/docs/repost" target="_blank">PushMeClient</a></span>
            <span class="me-relate-item"><a class="me-relate-git" href="https://t.me/pushme_channel" target="_blank"><i class="layui-icon layui-icon-release"></i></a><a href="https://t.me/pushme_channel" target="_blank">Telegram</a></span>
        </div>
    </div>

    <h2 style="line-height: 30px; color: #333; padding-top: 30px;">在线测试</h2>
    <div class="" style="margin: 20px 0;">
        <form class="layui-form layui-form-pane" lay-filter="form">
            <div class="layui-form-item">
                <label class="layui-form-label">push_key</label>
                <div class="layui-input-block">
                    <input type="password" name="push_key" lay-verify="required|pass" placeholder="请输入push_key" autocomplete="off" lay-affix="eye" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="checkbox" name="remember" lay-skin="primary" title="记住push_key" lay-filter="remember">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">消息标题</label>
                <div class="layui-input-block">
                    <div class="me-input-group">
                        <div class="me-input-prefix">
                            <select name="theme">
                                <option value="">主题</option>
                                <option value="i">信息</option>
                                <option value="s">成功</option>
                                <option value="w">警告</option>
                                <option value="f">失败</option>
                            </select>
                        </div>
                        <input type="text" name="title" placeholder="请输入消息标题" autocomplete="off" class="layui-input">
                        <div class="me-input-suffix">
                            <input type="text" name="channel" placeholder="消息通道" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">消息内容</label>
                <div class="layui-input-block">
                   <textarea name="content" placeholder="请输消息入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">消息类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="text" title="text" checked>
                    <input type="radio" name="type" value="markdown" title="markdown">
                    <input type="radio" name="type" value="html" title="html">
                    <input type="radio" name="type" value="data" title="data">
                    <input type="radio" name="type" value="markdata" title="markdata">
                    <input type="radio" name="type" value="chart" title="chart">
                    <input type="radio" name="type" value="echarts" title="echarts">
                </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 0;">
                <label class="layui-form-label">消息示例</label>
                <div class="layui-input-block me-hello-world">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="text">hello world</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="markdown">hello markdown</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="html">hello html</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="data">hello data</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="markdata">hello markdata</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="echarts">hello echarts</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">chart示例</label>
                <div class="layui-input-block me-hello-world">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="chart"  data-chart="normal">hello chart</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="chart"  data-chart="bar">bar chart</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="chart"  data-chart="bar2">bar chart 2</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="chart"  data-chart="bar3">bar chart 3</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="chart"  data-chart="line">line chart</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="chart"  data-chart="pie">pie chart</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-type="chart"  data-chart="pie2">pie chart 2</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="send">发送</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
{{/block}}

{{block 'js'}}
<script>
    layui.use(function() {
        const layer = layui.layer;
        const form = layui.form;
        const $ = layui.$;
      
        form.render().on('submit(send)', function(data) {
            const field = data.field;
            console.log(field);
    
            if(!field.push_key) {
                layer.msg('push_key不能为空！', {icon: 2});
                return false;
            }
    
            if(field.remember == 'on') {
                localStorage.setItem('push_key', field.push_key);
            } else {
                localStorage.removeItem('push_key');
            }
    
            if(!field.title && !field.content) {
                layer.msg('标题和内容至少填写一项！', {icon: 2});
                return false;
            }
    
            let title = field.title;
            if(field.theme) {
                title = `[${field.theme}]` + title;
            }
            if(field.channel) {
                title += `[~${field.channel}]`;
            }
            const push_data = {
                push_key: field.push_key,
                title,
                content: field.content,
                type: field.type
            };
    
            $.post('/', push_data, function(result) {
                if(result == 'success') {
                    layer.msg('发送成功！');
                    form.val('form', {title: '', content: ''});
                } else {
                    layer.msg(result, {icon: 2});
                }
            });
            return false;
        });
    
        form.on('checkbox(remember)', function(data) {
            const elem = data.elem;
            console.log(elem.checked);
    
            const input_push_key = $('input[name=push_key]').val();
            if(elem.checked && input_push_key) {
                localStorage.setItem('push_key', input_push_key);
            } else if(!elem.checked) {
                localStorage.removeItem('push_key');
            }
        });
    
        const cache_push_ley = localStorage.getItem('push_key')
        if(cache_push_ley) {
            form.val('form', {push_key: cache_push_ley, remember: 'on'});
        }

        const random = function() {
            return Math.round(Math.random()*100);
        };
        const randomLetter = function() {
            return String.fromCharCode(65 + Math.floor(Math.random() * 26));
        }
        $('.me-hello-world button').click(function() {
            const contents = {
                text: 'PushMe，一个简单轻量的Android消息通知客户端！',
                markdown: '## PushMe\n#### 一个简单轻量的Android消息通知客户端！\n官网：https://push.i-i.me/',
                html: '<div style="border: 10px solid #46bc99; text-align: center; font-size: 30px;">HTML</div>',
                data: random(),
                markdata: `||IP|UV|PV\n-|-|-|-\n今日|${random()}|${random()}|${random()}\n预计|${random()}|${random()}|${random()}\n昨日|${random()}|${random()}|${random()}`,
                chart: `${random()}`,
                echarts: `{"series":[{"type":"pie","data":[{"value":${random()},"name":"A"},{"value":${random()},"name":"B"},{"value":${random()},"name":"C"}]}]}`,
            };
            const charts = {
                normal: random(),
                bar: `${random()},${random()},${random()}`,
                bar2: `bar::${random()}|${randomLetter()}`,
                bar3: `bar|5::${random()}|${randomLetter()},${random()}|${randomLetter()}`,
                line: `line::${random()}|${randomLetter()}`,
                pie: `pie::${random()}|${randomLetter()}`,
                pie2: `pie|3::${random()}|A,${random()}|B,${random()}|C`,
            };
            const type = $(this).data('type');
            const chart = $(this).data('chart');
            const title = type == 'chart' ? $(this).text() : `hello ${type}`;
            const content = type == 'chart' ? charts[chart] : contents[type];
            form.val('form', {title, content, type});
        });
    });
</script>
{{/block}}